{% extends 'base.html' %}

{% block title %}系统配置 - SkitPanel 短剧管理面板{% endblock %}

{% block styles %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/config.css') }}">
{% endblock %}

{% block content %}
<div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-6 text-dark">系统配置</h1>
    
    <div class="bg-white rounded-xl shadow-lg p-6">
        <form id="config-form" class="space-y-6">
            <div class="space-y-4">
                <h2 class="text-xl font-semibold text-dark">豆瓣配置</h2>
                
                <div class="space-y-2">
                    <label for="douban-cookie" class="block text-sm font-medium text-gray-700">豆瓣 Cookie</label>
                    <textarea 
                        id="douban-cookie" 
                        name="douban-cookie" 
                        rows="4" 
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"
                        placeholder="输入豆瓣Cookie以获得更好的搜索效果..."
                    >{{ config.get('douban', {}).get('cookie', '') }}</textarea>
                    <p class="text-xs text-gray-500">提示：登录豆瓣后，在浏览器开发者工具中获取Cookie。</p>
                </div>
                
                <div class="space-y-2">
                <label for="user-agent" class="block text-sm font-medium text-gray-700">User-Agent</label>
                <input 
                    type="text" 
                    id="user-agent" 
                    name="user-agent" 
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all" 
                    value="{{ config.get('douban', {}).get('user_agent', '') }}"
                    placeholder="当前使用的User-Agent"
                    disabled
                >
            </div>
        </div>
        
        <div class="border-t pt-4"></div>
        
        <div class="space-y-4">
            <h2 class="text-xl font-semibold text-dark">TMDB 配置</h2>
            
            <div class="space-y-2">
                <label for="tmdb-api-key" class="block text-sm font-medium text-gray-700">TMDB API 密钥</label>
                <input 
                    type="text" 
                    id="tmdb-api-key" 
                    name="tmdb-api-key" 
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all" 
                    value="{{ config.get('tmdb', {}).get('api_key', '') }}"
                    placeholder="输入TMDB API密钥"
                >
                <p class="text-xs text-gray-500">提示：在TMDB网站注册账号后，在个人设置-API中申请API密钥。</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="space-y-2">
                    <label for="tmdb-proxy-ip" class="block text-sm font-medium text-gray-700">代理IP（可选）</label>
                    <input 
                        type="text" 
                        id="tmdb-proxy-ip" 
                        name="tmdb-proxy-ip" 
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all" 
                        value="{{ config.get('tmdb', {}).get('proxy_ip', '') }}"
                        placeholder="如127.0.0.1"
                    >
                </div>
                <div class="space-y-2">
                    <label for="tmdb-proxy-port" class="block text-sm font-medium text-gray-700">代理端口（可选）</label>
                    <input 
                        type="number" 
                        id="tmdb-proxy-port" 
                        name="tmdb-proxy-port" 
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all" 
                        value="{{ config.get('tmdb', {}).get('proxy_port', '') }}"
                        placeholder="如7890"
                        min="1" 
                        max="65535"
                    >
                </div>
            </div>
            <p class="text-xs text-gray-500">提示：如果无法连接TMDB服务器，可以尝试设置代理。</p>
        </div>
        
        <div class="border-t pt-4"></div>
        
        <div class="space-y-4">
            <h2 class="text-xl font-semibold text-dark">Javdb 配置</h2>
            
            <div class="space-y-2">
                <label for="javdb-cookie" class="block text-sm font-medium text-gray-700">Javdb Cookie</label>
                <textarea 
                    id="javdb-cookie" 
                    name="javdb-cookie" 
                    rows="4" 
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all" 
                    placeholder="输入Javdb Cookie以获得更好的搜索效果..."
                >{{ config.get('javdb', {}).get('cookie', '') }}</textarea>
                <p class="text-xs text-gray-500">提示：登录Javdb后，在浏览器开发者工具中获取Cookie。</p>
            </div>
        </div>
        
        <div class="border-t pt-4"></div>
        
        <div class="space-y-4">
            <h2 class="text-xl font-semibold text-dark">PTSkit 配置</h2>
            
            <div class="space-y-2">
                <label for="ptskit-cookie" class="block text-sm font-medium text-gray-700">PTSkit Cookie</label>
                <textarea 
                    id="ptskit-cookie" 
                    name="ptskit-cookie" 
                    rows="4" 
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"
                    placeholder="输入PTSkit Cookie以访问需要登录的种子内容..."
                >{{ config.get('ptskit', {}).get('cookie', '') }}</textarea>
                <p class="text-xs text-gray-500">提示：登录PTSkit站点后，在浏览器开发者工具中获取Cookie。</p>
            </div>
        </div>
        
        <div class="border-t pt-4"></div>
            
            <div class="space-y-4">
                <h2 class="text-xl font-semibold text-dark">qBittorrent 配置</h2>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="space-y-2">
                        <label for="qb-host" class="block text-sm font-medium text-gray-700">主机地址</label>
                        <input 
                            type="text" 
                            id="qb-host" 
                            name="qb-host" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"
                            value="{{ config.get('qbittorrent', {}).get('host', 'localhost') }}"
                            placeholder="localhost"
                        >
                        <p class="text-xs text-gray-500">提示：qBittorrent的IP例如：127.0.0.1。</p>
                    </div>
                    
                    <div class="space-y-2">
                        <label for="qb-port" class="block text-sm font-medium text-gray-700">端口</label>
                        <input 
                            type="number" 
                            id="qb-port" 
                            name="qb-port" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"
                            value="{{ config.get('qbittorrent', {}).get('port', 8080) }}"
                            placeholder="8080"
                        >
                        <p class="text-xs text-gray-500">提示：qBittorrent的端口例如：8080。</p>
                    </div>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="space-y-2">
                        <label for="qb-username" class="block text-sm font-medium text-gray-700">用户名</label>
                        <input 
                            type="text" 
                            id="qb-username" 
                            name="qb-username" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"
                            value="{{ config.get('qbittorrent', {}).get('username', 'admin') }}"
                            placeholder="admin"
                        >
                        <p class="text-xs text-gray-500">提示：登录qBittorrent的用户名。</p>
                    </div>
                    
                    <div class="space-y-2">
                        <label for="qb-password" class="block text-sm font-medium text-gray-700">密码</label>
                        <input 
                            type="password" 
                            id="qb-password" 
                            name="qb-password" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"
                            value="{{ config.get('qbittorrent', {}).get('password', 'adminadmin') }}"
                            placeholder="adminadmin"
                        >
                        <p class="text-xs text-gray-500">提示：登录qBittorrent的密码。</p>
                    </div>
                </div>
            </div>
            
            <div class="border-t pt-4"></div>
            
            <div class="space-y-4">
                <h2 class="text-xl font-semibold text-dark">Transmission 配置</h2>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="space-y-2">
                        <label for="tr-host" class="block text-sm font-medium text-gray-700">主机地址</label>
                        <input 
                            type="text" 
                            id="tr-host" 
                            name="tr-host" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"
                            value="{{ config.get('transmission', {}).get('host', 'localhost') }}"
                            placeholder="localhost"
                        >
                        <p class="text-xs text-gray-500">提示：Transmission的IP例如：127.0.0.1。</p>
                    </div>
                    
                    <div class="space-y-2">
                        <label for="tr-port" class="block text-sm font-medium text-gray-700">端口</label>
                        <input 
                            type="number" 
                            id="tr-port" 
                            name="tr-port" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"
                            value="{{ config.get('transmission', {}).get('port', 9091) }}"
                            placeholder="9091"
                        >
                        <p class="text-xs text-gray-500">提示：Transmission的端口例如：9091。</p>
                    </div>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="space-y-2">
                        <label for="tr-username" class="block text-sm font-medium text-gray-700">用户名</label>
                        <input 
                            type="text" 
                            id="tr-username" 
                            name="tr-username" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"
                            value="{{ config.get('transmission', {}).get('username', '') }}"
                            placeholder="可选"
                        >
                        <p class="text-xs text-gray-500">提示：登录Transmission的用户名。</p>
                    </div>
                    
                    <div class="space-y-2">
                        <label for="tr-password" class="block text-sm font-medium text-gray-700">密码</label>
                        <input 
                            type="password" 
                            id="tr-password" 
                            name="tr-password" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"
                            value="{{ config.get('transmission', {}).get('password', '') }}"
                            placeholder="可选"
                        >
                        <p class="text-xs text-gray-500">提示：登录Transmission的密码。</p>
                    </div>
                </div>
            </div>

            <div class="border-t pt-4"></div>
            
            <div class="space-y-4">
                <h2 class="text-xl font-semibold text-dark">飞牛媒体库配置</h2>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="space-y-2">
                        <label for="fnos-media-server-ip" class="block text-sm font-medium text-gray-700">飞牛媒体库IP地址</label>
                        <input 
                            type="text" 
                            id="fnos-media-server-ip" 
                            name="fnos-media-server-ip" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all" 
                            value="{{ config.get('fnos_media', {}).get('server_ip', 'localhost') }}"
                            placeholder="localhost"
                        >
                        <p class="text-xs text-gray-500">提示：飞牛媒体库IP例如：127.0.0.1。</p>
                    </div>
                    
                    <div class="space-y-2">
                        <label for="fnos-media-server-port" class="block text-sm font-medium text-gray-700">飞牛媒体库端口</label>
                        <input 
                            type="number" 
                            id="fnos-media-server-port" 
                            name="fnos-media-server-port" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"
                            value="{{ config.get('fnos_media', {}).get('server_port', 8088) }}"
                            placeholder="8088"
                        >
                        <p class="text-xs text-gray-500">提示：飞牛媒体库端口例如：5666。</p>
                    </div>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="space-y-2">
                        <label for="fnos-media-username" class="block text-sm font-medium text-gray-700">用户名</label>
                        <input 
                            type="text" 
                            id="fnos-media-username" 
                            name="fnos-media-username" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"
                            value="{{ config.get('fnos_media', {}).get('username', 'admin') }}"
                            placeholder="admin"
                        >
                        <p class="text-xs text-gray-500">提示：登录飞牛媒体库的用户名。</p>
                    </div>
                    
                    <div class="space-y-2">
                        <label for="fnos-media-password" class="block text-sm font-medium text-gray-700">密码</label>
                        <input 
                            type="password" 
                            id="fnos-media-password" 
                            name="fnos-media-password" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"
                            value="{{ config.get('fnos_media', {}).get('password', 'admin') }}"
                            placeholder="admin"
                        >
                        <p class="text-xs text-gray-500">提示：登录飞牛媒体库的密码。</p>
                    </div>
                </div>
                
                <div class="flex items-center space-x-2">
                    <input 
                        type="checkbox" 
                        id="fnos-media-verify-ssl" 
                        name="fnos-media-verify-ssl" 
                        class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"
                        {{ 'checked' if config.get('fnos_media', {}).get('verify_ssl', False) else '' }}
                    >
                    <label for="fnos-media-verify-ssl" class="block text-sm font-medium text-gray-700">启用SSL验证</label>
                </div>
            </div>
            
            <div class="border-t pt-4"></div>
            
            <div class="space-y-4">
                <h2 class="text-xl font-semibold text-dark">Emby媒体服务器配置</h2>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="space-y-2">
                        <label for="emby-server-url" class="block text-sm font-medium text-gray-700">Emby服务器IP地址</label>
                        <input 
                            type="text" 
                            id="emby-server-url" 
                            name="emby-server-url" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all" 
                            value="{{ config.get('emby', {}).get('server_url', 'localhost') }}"
                            placeholder="localhost"
                        >
                        <p class="text-xs text-gray-500">提示：Emby服务器IP例如：127.0.0.1。</p>
                    </div>
                    
                    <div class="space-y-2">
                        <label for="emby-server-port" class="block text-sm font-medium text-gray-700">Emby服务器端口</label>
                        <input 
                            type="number" 
                            id="emby-server-port" 
                            name="emby-server-port" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all" 
                            value="{{ config.get('emby', {}).get('server_port', 8096) }}"
                            placeholder="8096"
                        >
                        <p class="text-xs text-gray-500">提示：Emby服务器端口例如：8096。</p>
                    </div>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="space-y-2">
                        <label for="emby-api-key" class="block text-sm font-medium text-gray-700">API密钥</label>
                        <input 
                            type="text" 
                            id="emby-api-key" 
                            name="emby-api-key" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all" 
                            value="{{ config.get('emby', {}).get('api_key', '') }}"
                            placeholder="输入Emby的API密钥"
                        >
                        <p class="text-xs text-gray-500">提示：在Emby服务器后台的API密钥-新建API密钥-复制密钥。</p>
                    </div>
                    
                    <div class="space-y-2">
                        <label for="emby-user-id" class="block text-sm font-medium text-gray-700">用户ID</label>
                        <input 
                            type="text" 
                            id="emby-user-id" 
                            name="emby-user-id" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all" 
                            value="{{ config.get('emby', {}).get('user_id', '') }}"
                            placeholder="输入Emby的用户ID"
                        >
                        <p class="text-xs text-gray-500">提示：在Emby服务器后台的用户-点击用户-复制链接中userId=后面的字符串。</p>
                    </div>
                </div>
            </div>
            
            <div class="border-t pt-4"></div>
            
            <div class="space-y-4">
                <h2 class="text-xl font-semibold text-dark">应用配置</h2>
                
                <div class="space-y-2">
                    <label for="data-dir" class="block text-sm font-medium text-gray-700">数据目录</label>
                    <input 
                        type="text" 
                        id="data-dir" 
                        name="data-dir" 
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all bg-gray-100" 
                        value="{{ config.get('app', {}).get('data_dir', './data') }}"
                        disabled
                    >
                    <p class="text-xs text-gray-500">提示：此路径在Docker环境中会被映射为持久化存储</p>
                </div>
                
                <div class="space-y-2">
                    <label for="nfo-dir" class="block text-sm font-medium text-gray-700">NFO文件保存目录</label>
                    <input 
                        type="text" 
                        id="nfo-dir" 
                        name="nfo-dir" 
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all bg-gray-100" 
                        value="{{ config.get('app', {}).get('nfo_dir', './data/nfo_files') }}"
                        disabled
                    >
                </div>
                
                <div class="space-y-2">
                    <label for="image-dir" class="block text-sm font-medium text-gray-700">图片保存目录</label>
                    <input 
                        type="text" 
                        id="image-dir" 
                        name="image-dir" 
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all bg-gray-100" 
                        value="{{ config.get('app', {}).get('image_dir', './data/images') }}"
                        disabled
                    >
                </div>
            </div>
      
            <div class="flex justify-end space-x-4 pt-4">
                <button type="button" id="reset-btn" class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-all">
                    重置
                </button>
                <button type="submit" id="save-btn" class="px-6 py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-all flex items-center">
                    <i class="fa fa-save mr-2"></i>
                    保存配置
                </button>
            </div>

        </form>
    </div>
</div>

{% endblock %}

{% block scripts %}
    <script src="{{ url_for('static', filename='js/config.js') }}"></script>

{% endblock %}
